<template>
  <div class="common-layout">
    <div>
      <div class="title">宠物摄影</div>
      <el-container>
        <el-aside class="pet-image" >
          <!-- 左边显示图片 -->
          <img src="../../assets/sheying.jpg" />
          <img src="../../assets/sheying2.jpg" />
        </el-aside>
        <el-main>
          <!-- 右边显示文字 -->
          <div class="pet-info">
            <!-- 预约服务 -->
            <div>
              <el-button class="bt" @click="addopen">申请预约摄影服务</el-button>
            </div>
            <p>随着生活水平与艺术鉴赏水准的不断提高，越来越多的宠物家长迫切希望由职业摄影师记录下可爱宠物的精彩瞬间。</p>
            <h1 class="a1">用影像定格可爱宠物的精彩瞬间。</h1>
            <p>许多人不理解宠物对于这一代人的意义，就像他们不能理解高敏感人群，不能理解抑郁症，不能理解原生家庭带给孩子的痛苦一样。</p>
            <p>我们的宝贝是"家人"，与我们在成年后一起继续成长，同吃、同玩，它们也许不会说话，却能通过肢体语言了解我们的喜怒哀乐。</p>
            <p>用着自己的方式表达着爱意与陪伴。或许在别人看来，你只是心血来潮地在某个时间点，养了一只宠物。</p>
            <h1>而其实是那个时刻的你，已经处于某种情绪的边缘，一切即将崩溃。</h1>
            <h1 class="a2">是那只“宠物”的出现和陪伴，才拯救了那个时间的你。</h1>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
    <!-- 新增区域 -->
    <el-dialog v-model="dialogVisible" title="摄影服务信息" width="30%">
      <el-form label-width="70px" size="small">
        <el-form-item label="用户姓名">
          <el-input size="small" v-model="form.username" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户id">
          <el-input size="small" v-model="form.userid" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-input size="small" v-model="form.phototime" type="date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预约项目">
          <el-select clearable v-model="form.photoproject" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in phototypeList" :key="item.photoproject" :label="item.photoname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约备注">
          <el-input v-model="form.photodesc" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="宠物种类">
          <el-select clearable v-model="form.petstypeid" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in petstypeList" :key="item.petstypeid" :label="item.typename" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script>
    export default{
        name: "PhotoView",
      data() {
        return {
          photoList: [],
          phototypeList: [],
          petstypeList: [],
          dialogVisible: false,
          form: {},
        }
      },
      created() {
        this.getphotoList();
        this.getphototypeList();
        this.getpetstypeList();
      },
      methods:{
        //新增摄影框打开方法
        addopen(){
            this.form = {};
            this.dialogVisible =true;
        },
        //修改新增摄影方法
        save() {
          this.$http.post("/photo/", this.form).then((res) => {
            if (res.data.status == 200) {
                this.$message.success("提交成功,等待管理员审批"),
                this.dialogVisible = false,
                this.getphotoList();
            } else {
              this.$message.error(res.data.message);
            }
          });
          this.dialogFormVisiblepass = false;
        },
        //获取根据id获取摄影种类
        getphototypeList() {
          this.$http.get("/phototype").then((res) => {
            //console.log(res.data);
            if (res.data.status == 200) {
              this.phototypeList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取根据id获取宠物种类
        getpetstypeList() {
          this.$http.get("/petstype").then((res) => {
            //console.log(res.data);
            if (res.data.status == 200) {
              this.petstypeList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取摄影列表
        getphotoList() {
          this.$http.get("/photo").then((res) => {
            //console.log(res);
            if (res.data.status == 200) {
              this.photoList = res.data.data.records;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      }
    }
</script>

<style>
.pet-image {
  width: 500px;
  height: 650px;
  margin-right: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.common-layout{
  line-height: 50px;
  text-align:center;
  width: 90%; 
  margin: auto; 
  margin-top: -20px;
  background-color:#cdf0fd39;
}
.title {
  background-color: #cdf0fd39;
  text-align: center;
  font-size: 250%;
  font-weight: 900;
  font-family: "宋体";
  color: #0097ce;
}
.a1 {
  font-size: 60px;

}
.a2 {
  font-size: 35px;
}
.bt{
  width: 250px;
  height: 50px;
  font-size: 25px;
  font-family:  "宋体";
  font-weight: 900;
  background-color: rgb(164, 238, 174);
}
.pet-info{
  font-family: "宋体";
  color: #00506e;
}
</style>